import React from "react";
import Button from "antd/lib/button";
import Modal from "antd/lib/modal";
import Table from "antd/lib/table";
import Divider from "antd/lib/divider";
import Dropdown from "antd/lib/dropdown";
import Menu from "antd/lib/menu";
import { currentUser } from "@/services/auth";
import CreatePaymentActivityDialog from "@/components/payment/PaymentActivityDialog";
import notification from "@/services/notification";
import zhCN from 'antd/es/locale/zh_CN';
import WarningOutlined from "@ant-design/icons/WarningOutlined";
import QueryShowField from "@/services/queryshowfield";
import CreateQueryShowFieldDialog from "@/components/enums/QueryShowFieldDialog";
import Col from "antd/lib/col";
import Row from "antd/lib/row";
import Layout from "antd/lib/layout";
import ConfigProvider from "antd/lib/config-provider";
import { AppstoreFilled } from "@ant-design/icons";
import { inject, observer } from 'mobx-react';

const { confirm } = Modal;
const getRowClassName = (record, index) => {
  let className = '';
  if (index % 2 === 0) className = "oddRow";
  return className
}
class PaymentActivityList extends React.Component {
  state = {
    loading: true,
    queryshowfielddata: [],
  };
  componentWillMount() {
    this.fieldsshowload();

  }

  fieldsshowload = () => {
    QueryShowField.getbycode("paymentindetail").then(data => {
      this.setState({
        queryshowfielddata: data,
        loading: false,
      });
    });
  }

  handlefieldshow = () => {
    CreateQueryShowFieldDialog.showModal({ queryshowfield: this.state.queryshowfielddata })
      .onClose((result = {}) => {
        if (result.success) {
          this.fieldsshowload();
        }
      }).onDismiss(() => {
      });
  }
  handleadd = () => {
    let data={
      id: 0,//
      paymentid:this.props.id,
    }
    CreatePaymentActivityDialog.showModal({ data: data, paytype: this.props.paymentStore.paymentModel.paytype, paymentuserdata: this.props.paymentuserdata })
      .onClose((result = {}) => {
        if (result.success) {
          let tempdata = [...this.props.paymentStore.paymentModel.paymentactivitydata];
          tempdata.push(result.data);
          this.props.paymentStore.paymentModel.setPaymentactivitydata(tempdata, this.props.paymentStore.paymentModel.paytype, 0);
          this.props.paymentStore.paymentModel.setTotal(tempdata.length);
        }
      }).onDismiss(() => {
      });
  };
  handleupdate=record=>{
    CreatePaymentActivityDialog.showModal({ data: record, paytype: this.props.paymentStore.paymentModel.paytype, paymentuserdata: this.props.paymentuserdata })
      .onClose((result = {}) => {
        if (result.success) {

          let tempdata = [...this.props.paymentStore.paymentModel.paymentactivitydata];
          for (var item in tempdata) {
            if (tempdata[item].code === record.code) {
              tempdata[item] =result.data;
              break;
            }
          }
          this.props.paymentStore.paymentModel.setPaymentactivitydata(tempdata, this.props.paymentStore.paymentModel.paytype, 0);
          this.props.paymentStore.paymentModel.setTotal(tempdata.length);
        }
      }).onDismiss(() => {
      });
  }
  handledel = record => {
    confirm({
      title: '确定删除款项?',
      icon: <WarningOutlined />,
      content: record.name,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => {

        let tempdata = [...this.props.paymentStore.paymentModel.paymentactivitydata];
        for (var item in tempdata) {
          if (tempdata[item].code === record.code) {
            tempdata.splice(item, 1);
            break;
          }
        }
        this.props.paymentStore.paymentModel.setPaymentactivitydata(tempdata, this.props.paymentStore.paymentModel.paytype, 0);
        this.props.paymentStore.paymentModel.setTotal(tempdata.length);

        notification.success("款项删除成功.");

      },
    });
  };
  handleTableChange = (pagination, filters, sorter) => {

  };
  render() {
    if (this.state.loading) return null;
    const paginationProps = {
      showSizeChanger: true,
      total: this.props.paymentStore.paymentModel.total, // 数据总数
      pageSize: parseInt(this.props.paymentStore.paymentModel.pagesize), // 每页条数
      current: parseInt(this.props.paymentStore.paymentModel.page), // 当前页码
      pageSizeOptions: ["10", "15", "30", "100"],
      showTotal: ((total) => {
        return `共 ${total} 条`;
      }),
    };
    let listcolumns = [];
    if (this.state.queryshowfielddata.fieldsshow !== undefined) {
      (this.state.queryshowfielddata.fieldsshow || []).map(item => {
        let items = this.state.queryshowfielddata.fieldsall.filter((p) => {
          return p.key === item;
        });
        if (items.length > 0) {
          listcolumns.push({
            title: items[0].title,
            dataIndex: item,
            key: item,
            sorter: (a, b) => a[item] > b[item] ? 1 : -1
          })
        }
        return item;
      }
      );
    }
    listcolumns.push({
      title: '操作',
      key: 'action',
      render: (record) => (
        <span>
          <a className="clickable" onClick={() => this.handleupdate(record)} disabled={!this.props.paymentStore.paymentModel.isedit}>{"编辑"}</a>
          &nbsp;&nbsp;
          <a className="clickable" onClick={() => this.handledel(record)} disabled={!this.props.paymentStore.paymentModel.isedit}>{"删除"}</a>
        </span>
      ),
    });
    return (
      <ConfigProvider locale={zhCN}>
        <Layout>
          <Layout style={{ padding: '0 24px 24px' }}>
            <Row style={{ marginBottom: 5 }}>
              <Col span={10}>
                <Button type="primary" onClick={() => this.handleadd()} disabled={!this.props.paymentStore.paymentModel.isedit}>
                  <i className="fa fa-search m-r-5" />
                  新增
                </Button>
                <Divider type="vertical" />
                <Dropdown
                  trigger={["click"]}
                  overlay={
                    <Menu>
                      {currentUser.hasPermission("fieldshow") && (
                        <Menu.Item key="delete-item">
                          <a onMouseUp={() => this.handlefieldshow()}>显示隐藏列</a>
                        </Menu.Item>
                      )}
                    </Menu>
                  }>
                  <Button type="primary" style={{ margin: "10px" }} data-test="CreateButton" >
                    <AppstoreFilled />更多功能
                  </Button>
                </Dropdown>
              </Col>
            </Row>
            <div>
              <Table rowKey='code'
                rowClassName={(record, index) => getRowClassName(record, index)}
                columns={listcolumns}
                scroll={{ x: 'max-content' }}
                dataSource={this.props.paymentStore.paymentModel.paymentactivitydata}
                pagination={paginationProps}
                loading={this.state.loading}
                onChange={this.handleTableChange}
              />
            </div>
          </Layout>
        </Layout>
      </ConfigProvider>
    );
  }
}
export default inject('paymentStore')(observer(PaymentActivityList));